<template>

	<view class="background" :style="{'--width':width,'--height':height}">
		<!-- <button @click="cha" v-if="false">查</button> -->
		<view class="meng" v-if="meng"></view>
		<view class="tishi" v-if="meng">
			<image src="https://image.alhelp.net/uploads/20231104/3c6d28a15ae27e959809fba3b6ca9242.png" class="tu4"
				mode="aspectFit"></image>
			<text class="mengtext1">温馨提示:</text>
			<text class="mengtext2">可生成两份调剂报告：一份是预估分数的，一份是正式成绩单的。\n\n一旦提交后，报考院校和专业就不可以修改了喔。</text>
			<view class="but3" @click="tijiao">
				<image src="https://image.alhelp.net/uploads/20231104/57defd8800d56dae341f5767ba81237e.png" class="tu5"
					mode="aspectFit"></image>
				<text class="mengtext3">提交,生成报告</text>
			</view>
		</view>
		<image src="https://image.alhelp.net/uploads/20231104/ef86431325a6dc6f3a095a957d02cd3d.png" class="tu3"
			mode="aspectFit" v-if="meng" @click="guanbi"></image>

		<view class="top" :style="{'--width':width,'--height':height}">
			<uni-icons type="back" size="30" class="back" @click="back"></uni-icons>
			<text class="text1">生成个性化的报告</text>
		</view>
		<view class="title1">输入报考的大学和专业</view>

		<view class="bei1" :style="{'--width':width,'--height':height}" @click="open(1)">

			<image src="https://image.alhelp.net/uploads/20231104/98cb14c3bca017a4fe2dd8419cc9af3f.png" class="tu1"
				mode="aspectFit"></image>
			<text class="text2">{{(chooseArr[1].title || '')+(chooseArr[2].text|| '') || '选择报考的大学'}}</text>
			<uni-icons type="right" size="20" class="icon1"></uni-icons>
		</view>

		<view class="bei2" :style="{'--width':width,'--height':height}">
			<image src="https://image.alhelp.net/uploads/20231104/98cb14c3bca017a4fe2dd8419cc9af3f.png" class="tu1"
				mode="aspectFit"></image>

			<text class="text2">{{(chooseArr[3].text||'')+(chooseArr[3].value || '')||"专业"}}</text>
		</view>

		<view class="title2" :class="{'u-m-b-40':isProduce}">{{isProduce ? '输入正式成绩' :"输入初试成绩"}}</view>
		<view v-if="!isProduce" class="title3 u-m-b-40">*真实成绩出来后可以再生成一份</view>
		<view class="bei2" :style="{'--width':width,'--height':height}">
			<image src="/static/image/toolbox/edit.png" class="tu1" mode="aspectFit"></image>
			<text class="text2">英语</text>
			<input class="input1" @blur="handleScroll2" :style="{'--width':width,'--height':height}" v-model="scroll2">
		</view>
		<view class="bei2" :style="{'--width':width,'--height':height}">
			<image src="/static/image/toolbox/edit.png" class="tu1" mode="aspectFit"></image>
			<text class="text2">政治</text>
			<input class="input1" @blur="handleScroll3" :style="{'--width':width,'--height':height}" v-model="scroll3">
		</view>
		<view class="bei2" :style="{'--width':width,'--height':height}">
			<image src="/static/image/toolbox/edit.png" class="tu1" mode="aspectFit"></image>
			<text class="text2">专一</text>
			<input class="input1" @blur="handleScroll4" :style="{'--width':width,'--height':height}" v-model="scroll4">
		</view>
		<view class="bei2" :style="{'--width':width,'--height':height}">
			<image src="/static/image/toolbox/edit.png" class="tu1" mode="aspectFit"></image>
			<text class="text2">专二</text>
			<input class="input1" @blur="handleScroll5" :style="{'--width':width,'--height':height}" v-model="scroll5">
		</view>
		<view class="bei2" :style="{'--width':width,'--height':height}">
			<image src="/static/image/toolbox/edit.png" class="tu1" mode="aspectFit"></image>
			<text class="text2">总分</text>
			<input class="input1" :style="{'--width':width,'--height':height}" v-model="totalScroll1">
		</view>

		<!-- 上传图片 -->
		<view v-if="isProduce">
			<view class="text-center bold u-m-b-40 u-m-t-40">上传成绩单</view>
			<view class="flex align-center justify-center">
				<uni-singleimg :fileUrl="scoreCard" v-if="scoreCard" @delPic="delPic" class="u-m-r-10"></uni-singleimg>
				<view @click="uploadFileClick()"
					style="width:340rpx;height:200rpx;background: #fff;border-radius: 14rpx;border:1px solid #f0f0f1;">
					<view style="text-align: center;margin-top: 5rpx;font-size: 64rpx;font-weight: 700;color: #666666">
						+</view>
					<view style="font-size: 28rpx;color: #333333;text-align: center;margin-top: 25rpx;font-weight: 700;">
						成绩单</view>
				</view>
			</view>
		</view>

		<view class="title2">输入基础信息</view>

		<view class="bei3" :style="{'--width':width,'--height':height}">
			<image src="/static/image/toolbox/edit.png" class="tu1" mode="aspectFit"></image>
			<text class="text2">姓名</text>
			<input class="input1" :style="{'--width':width,'--height':height}" v-model="name1">
		</view>
		<view class="bei4" :style="{'--width':width,'--height':height}">
			<image src="/static/image/toolbox/edit.png" class="tu1" mode="aspectFit"></image>
			<text class="text2">电话</text>
			<input class="input1" :style="{'--width':width,'--height':height}" v-model="phone1">
		</view>
		<view class="bei5" :style="{'--width':width,'--height':height}" @click="openSchool">
			<image src="https://image.alhelp.net/uploads/20231104/98cb14c3bca017a4fe2dd8419cc9af3f.png" class="tu1"
				mode="aspectFit"></image>
			<text class="text2">本科毕业大学</text>
			<input class="input1" disabled :style="{'--width':width,'--height':height}" v-model="daxue">
		</view>
		<view class="bei5" :style="{'--width':width,'--height':height}">

			<image src="https://image.alhelp.net/uploads/20231104/98cb14c3bca017a4fe2dd8419cc9af3f.png" class="tu1"
				mode="aspectFit"></image>

			<text class="text2">本科专业</text>
			<input class="input1" @click="openZy" disabled :style="{'--width':width,'--height':height}" v-model="zhuanye">
		</view>


		<view class="kuang" v-if="!isProduce">
			<view class="but1" @click="shaohou">
				<image src="https://image.alhelp.net/uploads/20231104/c32a08af9c464c366a5cf0b0e680bdb2.png" class="tu6"
					mode="aspectFit"></image>
				<text class="text5">
					稍后生成</text><text class="text4">在个人中心生成</text>
			</view>
			<view class="but2" @click="shengcheng">
				<image src="https://image.alhelp.net/uploads/20231104/57defd8800d56dae341f5767ba81237e.png" class="tu2"
					mode="aspectFit"></image>
				<text class="text3">
					立即生成报告</text><text class="text4">在个人中心查看</text>
			</view>
		</view>
		<view class="produceBtn" v-else @click="shengcheng">
			<image src="https://image.alhelp.net/uploads/20231104/57defd8800d56dae341f5767ba81237e.png" class="produceImg"
				mode="aspectFit"></image>
			<view>
				<view class="produceText1">
					立即生成报告</view>
				<view class="produceText2">在个人中心查看</view>
			</view>
		</view>
		<view class="pickerLayer" v-if="showPicker">
			<view class="layerMain">
				<view class="layerTitle flex alignCenter">
					<view class="cancel font14 colorccc" @click="closeClick">取消</view>
					<view class="title">选择报考学院及专业</view>
					<view class="sure font14 colorMain" @click="handleSureMajor">确定</view>
				</view>
				<scroll-view scroll-x="true">
					<view class="flex alignCenter font14 chooseBox">
						<view :class="flag7==0?'commonChoose activeLayerStyle hiddenOneline':'commonChoose hiddenOneline'"
							@click="qing(0)">{{chooseArr[0].fullName||"请选择"}}</view>
						<view :class="flag7==1?'commonChoose activeLayerStyle hiddenOneline':'commonChoose hiddenOneline'"
							@click="qing(1)" v-if="flag7!=0">{{chooseArr[1].title||"请选择"}}</view>
						<view :class="flag7==2?'commonChoose activeLayerStyle hiddenOneline':'commonChoose hiddenOneline'"
							@click="qing(2)" v-if="flag7>=2">{{chooseArr[2].text||"请选择"}}</view>
						<view :class="flag7==3?'commonChoose activeLayerStyle hiddenOneline':'commonChoose hiddenOneline'"
							@click="qing(3)" v-if="flag7>=4">{{chooseArr[3].text||"请选择"}}</view>
					</view>
				</scroll-view>
				<!-- 请求展示的·数据 -->
				<view class="dataBox">
					<scroll-view scroll-y="true" class="font14 dataScroll">
						<template v-if="flag6===0">
							<view v-for="(i,index) in shengfen1" :key="i.id"
								:class="i.fullName==chooseArr[0].fullName?'scrollItem colorMain':'scrollItem'" @click="cho1(index)">
								{{i.fullName}}
								<uni-icons class="activeIcon" type="checkmarkempty" size="16"
									v-if="i.fullName==chooseArr[0].fullName"></uni-icons>
							</view>
						</template>
						<template v-if="flag6===1">
							<view v-for="(i,index) in xuexiao1[0]" :key="i.id"
								:class="i.title==chooseArr[1].title?'scrollItem colorMain':'scrollItem'" @click="cho2(index)">
								({{i.schoolCode}}){{i.title}}
								<uni-icons class="activeIcon" type="checkmarkempty" size="16"
									v-if="i.title==chooseArr[1].title"></uni-icons>
							</view>
						</template>
						<template v-if="flag6===2">
							<view v-for="(i,index) in xueyuanlist1" :key="i.id"
								:class="i.text==chooseArr[2].text?'scrollItem colorMain':'scrollItem'" @click="cho3(index)">
								({{i.value}}){{i.text}}
								<uni-icons class="activeIcon" type="checkmarkempty" size="16"
									v-if="i.text==chooseArr[2].text"></uni-icons>
							</view>
						</template>
						<template v-if="flag6===3">
							<view v-for="(i,index) in zhuanyelist1" :key="i.id"
								:class="i.text==chooseArr[3].text?'scrollItem colorMain':'scrollItem'" @click="cho4(index)">
								({{i.value}}){{i.text}}
								<uni-icons class="activeIcon" type="checkmarkempty" size="16"
									v-if="i.text==chooseArr[3].text"></uni-icons>
							</view>
						</template>
					</scroll-view>
				</view>
			</view>
		</view>
		<u-select v-model="zyShow" confirm-color="#F7DD5E" :list="zyList" @confirm="handleZy"></u-select>
	</view>

</template>

<script>
	import {
		shangpingliebiao,
		zhifu,
		getxueyuan,
		getzhuanye,
		getzhuanye1,
		getdaxue,
		shangchuan,
		generateLater,
		getCityList,
		getdaxue1,
		huixian,
		tiaojiliebiao
	} from "@/api/toolbox.js"
	import {
		chooseImg,
		uploadFile,
		previewImg,
	} from "@/utils/common.js"
	export default {
		data() {
			return {
				scoreCard: null, //正式分数成绩单
				zyShow: false,
				zyList: [],
				chooseSchoolCode: null,
				payOrderId: "", //订单ID
				id: null, //回显ID
				isProduce: false, //是否正式分数
				width: 0,
				height: 0,
				xueyuanlist1: [],
				zhuanyelist1: [],
				schoollist1: [],
				baokaodaxue: "",
				baokaoxueyuan: "",
				baokaozhuanye: "",
				flag1: true,
				flag2: true,
				schooltitle: "",
				xueyuantitle: "",
				zhuanyetitle: "",
				meng: false,


				shengfen1: [],
				showPicker: false,
				chooseArr: [{}, {}, {}, {}],
				flag6: 0,
				flag7: 0,
				shengfen1: [],
				xuexiao1: [],
				xueyuanlist1: [],
				zhuanyelist1: [],
				shengfen2: {
					"pageNum": 1,
					"pageSize": 999999,
					"reasonable": true,
					"year": "",
					"areaId": "1475405387606917120"
				},


				scroll1: "",
				scroll2: "",
				scroll3: "",
				scroll4: "",
				scroll5: "",
				name1: "",
				phone1: "",
				daxue: "",
				zhuanye: "",
				flag8: false,

				list: {
					"adjust": {
						"provinceList": [],
						"studyType": null,
						"learningStyle": null,
						"schoolAttributeList": []
					},
					"source": {
						"province": "",
						"schoolCode": "",
						"schoolName": "",
						"collageCode": "",
						"collageName": "",
						"majorCode": "",
						"majorName": "",
						"english": "",
						"politics": "",
						"majorFirst": "",
						"majorSecond": "",
						"name": "",
						"phone": "",
						"moneyTotal": 0,
						"graduationInstitution": "",
						"undergraduateMajor": ""
					}
				},
			}
		},
		onLoad(option) {
			console.log('option: ', option);
			if (option.payOrderId) {
				this.payOrderId = option.payOrderId;
			}
			if (option.id) {
				this.id = option.id;
			}
			if (option.type && option.type === 'produce') {
				//正式分数生成个性化报告
				this.isProduce = true;
			}

			console.log('this.isProduce: ', this.isProduce);


			let a = uni.getWindowInfo()
			this.width = a.screenWidth
			this.height = a.screenHeight
			getCityList().then((res) => {
				this.shengfen1 = res.data
			})
			if (option.value != 1) {
				tiaojiliebiao({
					adjustId: this.id,
					pageNum: 1,
					pageSize: 1,
				}).then((res) => {
					console.log('res: ', res);
					if (res.data.rows.length) {
						let data = res.data.rows[0];
						this.flag8 = true
						let j = {
							"title": "",
							schoolCode: ""
						}
						j.schoolCode = data.schoolCode
						j.title = data.collageCode
						this.$set(this.chooseArr, 1, j)
						j = {
							"value": "",
							"text": ""
						}
						j.value = data.collageCode
						j.text = data.collageName
						this.$set(this.chooseArr, 2, j)

						j = {
							"value": "",
							"text": ""
						}
						j.value = data.majorCode
						j.text = data.majorName
						this.$set(this.chooseArr, 3, j)
						this.scroll1 = data.firstTotal
						this.scroll2 = data.english
						this.scroll3 = data.politics
						this.scroll4 = data.majorFirst
						this.scroll5 = data.majorSecond
						this.name1 = data.name
						this.phone1 = data.phone
						this.daxue = data.graduationInstitution
						this.zhuanye = data.undergraduateMajor
					}
				})
			} else {
				let storeSync = uni.getStorageSync('chooseArr');
				let storeSyncFraction = uni.getStorageSync('fraction');
				let storeSyncInformation = uni.getStorageSync('information');

				if (storeSyncInformation) {
					storeSyncInformation = JSON.parse(storeSyncInformation);
					this.name1 = storeSyncInformation.name1;
					this.phone1 = storeSyncInformation.phone1;
					this.daxue = storeSyncInformation.daxue;
					this.zhuanye = storeSyncInformation.zhuanye;
				}

				if (storeSyncFraction) {
					storeSyncFraction = JSON.parse(storeSyncFraction);
					this.scroll1 = storeSyncFraction.scroll1;
					this.scroll2 = storeSyncFraction.scroll2;
					this.scroll3 = storeSyncFraction.scroll3;
					this.scroll4 = storeSyncFraction.scroll4;
					this.scroll5 = storeSyncFraction.scroll5;
				}
				if (storeSync) {
					this.chooseArr = JSON.parse(storeSync);
				}
			}
		},
		watch: {
			baokaodaxue: function(val) {
				if (val == "") {
					this.schooltitle = ""
				}
				for (let i in this.schoollist1) {
					if (val == this.schoollist1[i].value) {
						this.schooltitle = this.schoollist1[i].text
					}
				}
			},
			baokaoxueyuan: function(val) {
				if (val == "") {
					this.xueyuantitle = ""
				}
				for (let i in this.xueyuanlist1) {
					if (val == this.xueyuanlist1[i].value) {
						this.xueyuantitle = this.xueyuanlist1[i].text
					}
				}
			},
			baokaozhuanye: function(val) {
				if (val == "") {
					this.zhuanyetitle = ""
				}
				for (let i in this.zhuanyelist1) {
					if (val == this.zhuanyelist1[i].value) {
						this.zhuanyetitle = this.zhuanyelist1[i].text
					}
				}
			}
		},
		computed: {
			totalScroll1() {
				let num = 0;
				for (let i = 2; i < 6; i++) {
					let count = this[`scroll${i}`] ? Number(this[`scroll${i}`]) : 0;
					num += count;
				}
				this.scroll1 = num;
				return this.scroll1 || '';
			},
		},
		onShow() {
			let chooseSchool = uni.getStorageSync('chooseSchoolObj');
			let chooseMajorObj = uni.getStorageSync('chooseMajorObj');
			if (chooseMajorObj) {
				this.zhuanye = chooseMajorObj.majorName;
				uni.removeStorageSync('chooseMajorObj');
			}
			if (chooseSchool) {
				this.daxue = chooseSchool.schoolName;
				this.chooseSchoolCode = chooseSchool.schoolCode;
				uni.removeStorageSync('chooseSchoolObj');
			}
		},
		methods: {
			uploadFileClick() {
				chooseImg(1).then((file) => {
					uploadFile(file).then(url => {
						this.scoreCard = url.url;
					})
				})
			},
			// 删除图片
			delPic() {
				this.scoreCard = ''
			},
			handleZy(e) {
				this.zhuanye = e[0].label;
			},
			openZy() {
				if (!this.chooseSchoolCode) {
					uni.showToast({
						title: '请先选择本科毕业大学',
						icon: 'none'
					});
					return;
				}
				uni.navigateTo({
					url: '/pages/toolbox/adjustReport/searchSpeciality?schoolCode=' + this.chooseSchoolCode
				});
			},
			openSchool() {
				uni.navigateTo({
					url: '/pages/toolbox/adjustReport/searchSchool',
				});
			},
			handleScroll2() {
				if (this.scroll2 > 100) {
					uni.showToast({
						title: '不能超过100分',
						icon: 'none'
					});
					this.scroll2 = 100;
					return;
				}
			},
			handleScroll3() {
				if (this.scroll3 > 100) {
					uni.showToast({
						title: '不能超过100分',
						icon: 'none'
					});
					this.scroll3 = 100;
					return;
				}
			},
			handleScroll4() {
				if (this.scroll4 > 150) {
					uni.showToast({
						title: '不能超过150分',
						icon: 'none'
					});
					this.scroll4 = 150;
					return;
				}
			},
			handleScroll5() {
				if (this.scroll5 > 300) {
					uni.showToast({
						title: '不能超过300分',
						icon: 'none'
					});
					this.scroll5 = 300;
					return;
				}
			},
			cha() {},
			handleSureMajor() {

				new Promise((resolve, reject) => {
					let flag = false;
					this.chooseArr.forEach((e, i) => {
						if (JSON.stringify(e) === '{}') {
							flag = true;
						}
						if (i === this.chooseArr.length - 1) {
							if (flag) reject();
							else resolve();
						}
					})
				}).then(() => {
					this.showPicker = false;
				}).catch(() => {
					uni.showToast({
						title: '请选择完全部数据！',
						icon: 'none'
					});
				})
			},
			// 关闭选择弹框
			closeClick() {
				// this.chooseArr = [{}, {}, {}, {}];
				// this.flag6 = 0;
				// this.flag7 = 0;
				this.showPicker = false
			},
			shengcheng() {
				this.meng = true
			},
			guanbi() {
				this.meng = false
			},
			qing(value) {
				this.flag7 = value
				this.flag6 = value
				if (value == 0) {
					this.xuexiao1 = []
					this.xueyuanlist1 = []
					this.zhuanyelist1 = []
					this.$set(this.chooseArr, 1, {})
					this.$set(this.chooseArr, 2, {})
					this.$set(this.chooseArr, 3, {})
				}
				if (value == 1) {
					this.xueyuanlist1 = []
					this.$set(this.chooseArr, 2, {})
					this.$set(this.chooseArr, 3, {})
				}
				if (value == 2) {
					this.zhuanyelist1 = []
					this.$set(this.chooseArr, 3, {})
				}

			},
			cho1(value) {
				this.$set(this.chooseArr, 0, this.shengfen1[value])
				this.$set(this.shengfen2, "areaId", this.shengfen1[value].id)
				getdaxue1(this.shengfen2).then((res) => {
					this.xuexiao1 = []
					this.xuexiao1.push(res.data.rows)

				})
				this.flag6 = 1
				this.flag7 = 1
			},
			cho2(value) {
				this.$set(this.chooseArr, 1, this.xuexiao1[0][value])
				this.xueyuanlist1 = [];
				let date = new Date();
				let year = date.getFullYear();
				getxueyuan({
					"schoolCode": this.xuexiao1[0][value].schoolCode,
					"year": year
				}).then((res) => {
					for (let i in res.data) {
						let j = {}
						this.$set(j, "text", res.data[i].title)
						this.$set(j, "value", res.data[i].collegeCode)
						this.xueyuanlist1.push(j)
					}
				});
				this.flag6 = 2
				this.flag7 = 2
			},
			cho3(value) {
				this.$set(this.chooseArr, 2, this.xueyuanlist1[value])
				this.zhuanyelist1 = [];
				getzhuanye1({
					"schoolCode": this.chooseArr[1].schoolCode,
					"collegeCode": this.chooseArr[2].value,
					'year': new Date().getFullYear(),
				}).then((res) => {
					for (let i in res.data) {
						let j = {}
						this.$set(j, "text", res.data[i].title)
						this.$set(j, "value", res.data[i].majorCode)
						this.zhuanyelist1.push(j)
					}
				});
				this.flag6 = 3
				this.flag7 = 3
			},
			cho4(value) {
				this.$set(this.chooseArr, 3, this.zhuanyelist1[value])
				this.handleSureMajor()
			},
			xueyuan(e) {
				this.xueyuanlist1 = [];
				this.zhuanyelist1 = [];
				this.baokaoxueyuan = "";
				this.baokaozhuanye = "";
				this.flag1 = false;
				let date = new Date();
				let year = date.getFullYear();
				getxueyuan({
					"schoolCode": e,
					"year": year
				}).then((res) => {
					for (let i in res.data) {
						let j = {}
						this.$set(j, "text", res.data[i].title)
						this.$set(j, "value", res.data[i].collegeCode)
						this.xueyuanlist1.push(j)
					}
				});
				getzhuanye({
					"schoolCode": e
				}).then((res) => {
					for (let i in res.data) {
						let j = {}
						this.$set(j, "text", res.data[i].majorName)
						this.$set(j, "value", res.data[i].majorCode)
						this.zhuanyelist1.push(j)
					}
				});

			},
			back() {
				uni.navigateBack();
			},
			shaohou() {
				uni.navigateBack({
					delta: 2
				});
			},
			tijiao(type) {
				this.list.source.schoolCode = this.chooseArr[1].schoolCode
				this.list.source.collageCode = this.chooseArr[2].value
				this.list.source = {
					schoolCode: this.chooseArr[1].schoolCode,
					schoolName: this.chooseArr[1].title,
					collageCode: this.chooseArr[2].value,
					collageName: this.chooseArr[2].text,
					majorCode: this.chooseArr[3].value,
					majorName: this.chooseArr[3].text,
					english: this.scroll2,
					politics: this.scroll3,
					majorFirst: this.scroll4,
					majorSecond: this.scroll5,
					name: this.name1,
					phone: this.phone1,
					graduationInstitution: this.daxue,
					undergraduateMajor: this.zhuanye,
					province: this.shengfen2.areaId,
					moneyTotal: 0
				}
				if (this.payOrderId) {
					this.list['payOrderId'] = this.payOrderId;
					this.list['isFormal'] = this.isProduce ? 1 : 2;
				}
				new Promise((resolve, reject) => {
					let flag = false;
					for (let key in this.list.source) {
						if (!this.list.source[key] && key != 'moneyTotal') {
							console.warn(this.list.source[key]);
							flag = true;
						}
					}
					if (flag) reject();
					else resolve();
				}).then(() => {
					if (this.isProduce && !this.scoreCard) {
						uni.showToast({
							title: '请上传成绩单！',
							icon: 'none'
						});
						return;
					}
					this.list.source['scoreCard'] = this.scoreCard;
					shangchuan(this.list).then(res => {
						let str = this.isProduce ? 'produce' : 'test';
						// 关闭当前页，跳转到下载页
						uni.redirectTo({
							url: "/pages/toolbox/chooseSchool/tiaojixiazai?type=" + str + "&id=" + res.data
						})
					})

				}).catch(() => {
					uni.showToast({
						title: '数据还没有填完全！',
						icon: 'none'
					});
				})
			},
			open(value) {
				if (this.flag8 != true) {
					this.showPicker = true
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.background {
		background-color: #f0f0f0;
		width: calc(var(--width)*1px);
		height: calc(var(--height)/1000*1220*1px);
	}

	.back {
		margin-left: calc(var(--width)/1000*10*1px);
	}

	.text1 {
		position: absolute;
		margin-left: calc(var(--width)/1000*30*1px);
		margin-top: calc(var(--height)/1000*3*1px);
		font-weight: bold;
	}

	.top {
		width: calc(var(--width)*1px);
		height: calc(var(--height)/1000*50*1px);
		background-color: white;
		margin-top: calc(var(--height)/1000*60*1px);
	}

	.title1 {
		font-weight: bold;
		font-size: calc(var(--width)/1000*40*1px);
		text-align: center;
		// margin-left: calc(var(--width)/1000*300*1px);
		margin-top: calc(var(--height)/1000*30*1px);
	}

	.title2 {
		font-weight: bold;
		font-size: calc(var(--width)/1000*40*1px);
		margin-left: calc(var(--width)/1000*380*1px);
		margin-top: calc(var(--height)/1000*30*1px);
	}

	.title3 {
		color: #eed359;
		font-size: calc(var(--width)/1000*32*1px);
		margin-left: calc(var(--width)/1000*280*1px);
		margin-top: calc(var(--height)/1000*5*1px);
	}

	.bei1 {
		width: calc(var(--width)*1px);
		height: calc(var(--height)/1000*60*1px);
		background-color: white;
		border-bottom: solid #eeeeee 1px;
		margin-top: calc(var(--height)/1000*30*1px);
	}

	.tu1 {

		width: calc(var(--width)/1000*40*1px);
		height: calc(var(--height)/1000*60*1px);
		margin-left: calc(var(--width)/1000*30*1px);
		margin-top: calc(var(--height)/1000*1*1px);

	}

	.text2 {
		position: absolute;
		font-size: calc(var(--width)/1000*34*1px);
		margin-left: calc(var(--width)/1000*20*1px);

		margin-top: calc(var(--height)/1000*15*1px);

	}

	.icon1 {
		position: absolute;
		margin-left: calc(var(--width)/1000*800*1px);
		margin-top: calc(var(--height)/1000*13*1px);
	}

	.bei2 {
		width: calc(var(--width)*1px);

		height: calc(var(--height)/1000*60*1px);

		background-color: white;
		border-bottom: solid #eeeeee 1px;
	}

	.bei3 {
		margin-top: calc(var(--height)/1000*23*1px);
		width: calc(var(--width)*1px);

		height: calc(var(--height)/1000*60*1px);

		background-color: white;
	}

	.bei4 {
		width: calc(var(--width)*1px);

		height: calc(var(--height)/1000*60*1px);

		background-color: white;
		border-bottom: solid #eeeeee 2px;
	}

	.bei5 {
		width: calc(var(--width)*1px);

		height: calc(var(--height)/1000*60*1px);

		background-color: white;

	}

	.but1 {
		position: absolute;
		font-size: 14px;
		background-color: #7d849d;
		width: calc(var(--width)/1000*380*1px);
		height: calc(var(--height)/1000*60*1px);
		margin-left: calc(var(--width)/1000*125*1px);
		margin-top: calc(var(--height)/1000*30*1px);
		border-top-left-radius: calc(var(--height)/1000*50/2*1px);
		border-bottom-left-radius: calc(var(--height)/1000*50/2*1px);

		box-shadow: 1px 1px 1px #e5e5e5;
		opacity: 0.95;

	}

	.but2 {
		position: absolute;
		font-size: 14px;
		background-color: #F7DD5E;
		width: calc(var(--width)/1000*380*1px);
		height: calc(var(--height)/1000*60*1px);
		margin-left: calc(var(--width)/1000*500*1px);
		margin-top: calc(var(--height)/1000*30*1px);
		border-top-right-radius: calc(var(--height)/1000*50/2*1px);
		border-bottom-right-radius: calc(var(--height)/1000*50/2*1px);
		box-shadow: 1px 1px 1px #e5e5e5;
		opacity: 0.95;
	}

	.produceBtn {
		font-size: 14px;
		background-color: #F7DD5E;
		box-shadow: 1px 1px 1px #e5e5e5;
		height: 98rpx;
		opacity: 0.95;
		border-radius: calc(var(--height)/1000*50/2*1px);
		width: 400rpx;
		margin: calc(var(--height)/1000*30*1px) auto 0;
		display: flex;
		align-items: center;
		justify-content: center;

		.produceImg {
			width: calc(var(--width)/1000*60*1px);
			height: calc(var(--height)/1000*80*1px);
			margin-right: 10rpx;
		}

		.produceText1 {
			font-size: calc(var(--width)/1000*35*1px);
		}

		.produceText2 {
			font-size: calc(var(--width)/1000*25*1px);
		}
	}


	.text4 {
		position: absolute;
		margin-top: calc(var(--height)/1000*35*1px);
		margin-left: calc(var(--width)/1000*105*1px);
		font-size: calc(var(--width)/1000*25*1px);
	}

	.text3 {
		position: absolute;
		margin-top: calc(var(--height)/1000*5*1px);
		margin-left: calc(var(--width)/1000*90*1px);
		font-size: calc(var(--width)/1000*35*1px);
	}

	.text5 {
		position: absolute;
		margin-top: calc(var(--height)/1000*5*1px);
		margin-left: calc(var(--width)/1000*125*1px);
		font-size: calc(var(--width)/1000*35*1px);

	}

	.kuang {
		width: calc(var(--width)/1000*350*1px);
		height: calc(var(--height)/1000*120*1px);
	}

	.tu2 {
		position: absolute;
		width: calc(var(--width)/1000*60*1px);
		height: calc(var(--height)/1000*80*1px);
		margin-left: calc(var(--width)/1000*30*1px);
		margin-top: calc(var(--height)/1000*-12*1px);
	}

	.meng {
		position: absolute;
		width: calc(var(--width)*1px);
		height: calc(var(--height)/1000*1220*1px);
		background-color: black;
		opacity: 0.8;
		z-index: 1;
	}

	.tishi {

		z-index: 2;
		position: fixed;
		background-color: white;
		border-radius: 10px;
		width: calc(var(--width)/1000*800*1px);
		height: calc(var(--height)/1000*450*1px);
		margin-left: calc(var(--width)/1000*100*1px);
		margin-top: calc(var(--height)/1000*202*1px);
	}

	.tu3 {
		z-index: 2;
		position: fixed;
		width: calc(var(--width)/1000*100*1px);
		height: calc(var(--height)/1000*100*1px);
		margin-left: calc(var(--width)/1000*430*1px);
		margin-top: calc(var(--height)/1000*680*1px);
	}

	.tu6 {
		position: absolute;
		width: calc(var(--width)/1000*50*1px);
		height: calc(var(--height)/1000*70*1px);
		margin-left: calc(var(--width)/1000*30*1px);
		margin-top: calc(var(--height)/1000*-5*1px);
	}

	.tu4 {
		position: absolute;
		width: calc(var(--width)/1000*60*1px);
		height: calc(var(--height)/1000*60*1px);
		margin-left: calc(var(--width)/1000*240*1px);
		margin-top: calc(var(--height)/1000*20*1px);
	}

	.mengtext1 {
		position: absolute;
		margin-top: calc(var(--height)/1000*30*1px);
		margin-left: calc(var(--width)/1000*310*1px);
		font-weight: bold;
		font-size: calc(var(--width)/1000*50*1px);
	}

	.mengtext2 {
		position: absolute;
		margin-top: calc(var(--height)/1000*100*1px);
		margin-left: calc(var(--width)/1000*50*1px);
		font-size: calc(var(--width)/1000*40*1px);
	}

	.but3 {
		background-color: #F7DD5E;
		width: calc(var(--width)/1000*550*1px);
		height: calc(var(--height)/1000*80*1px);
		margin-left: calc(var(--width)/1000*130*1px);
		margin-top: calc(var(--height)/1000*330*1px);
		border-radius: calc(var(--height)/1000*70/2*1px);
	}

	.tu5 {
		position: absolute;
		width: calc(var(--width)/1000*80*1px);
		height: calc(var(--height)/1000*80*1px);
		margin-left: calc(var(--width)/1000*50*1px);
		margin-top: calc(var(--height)/1000*1*1px);
	}

	.mengtext3 {
		position: absolute;
		margin-left: calc(var(--width)/1000*170*1px);
		margin-top: calc(var(--height)/1000*25*1px);
	}

	.view2 {
		width: calc(var(--width)/1000*820*1px);
		height: calc(var(--height)/1000*60*1px);
		margin-top: calc(var(--height)/1000*100*1px);
		margin-left: calc(var(--width)/1000*90*1px);

	}

	.view21 {
		position: absolute;
		margin-top: calc(var(--height)/1000*40*1px);
		margin-left: calc(var(--width)/1000*90*1px);
	}

	.chuangkou {
		background-color: white;
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
		height: calc(var(--height)/1000*760*1px);
		padding-top: calc(var(--height)/1000*50*1px);
	}

	.input1 {
		position: absolute;
		z-index: 0;

		margin-top: calc(var(--height)/1000*-55*1px);

		font-size: calc(var(--width)/1000*35*1px);
		margin-left: calc(var(--width)/1000*200*1px);
		width: calc(var(--width)/1000*620*1px);
		text-align: center;
	}


	.pickerLayer {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .15);
		z-index: 2;

		.layerMain {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 1200rpx;
			padding: 30rpx 0;
			box-sizing: border-box;
			border-radius: 40rpx 40rpx 0 0;
			background: #fff;
		}

		.layerTitle {
			text-align: center;
			position: relative;
			justify-content: space-around;

			// text-align: center;
			// position: relative;
			// .layerClose{
			// 	position: absolute;
			// 	right: 30rpx;
			// 	bottom: 0;
			// }
		}

		scroll-view {
			margin: 30rpx 0 0;
		}

		.chooseBox {
			// margin: 30rpx 0 0;
			padding: 0 30rpx;
			box-sizing: border-box;
			border-bottom: 1px solid $bordercolor;
			height: 80rpx;
			line-height: 80rpx;

			.commonChoose {
				padding: 0 40rpx;
				flex-shrink: 0;
			}

			.activeLayerStyle {
				border-bottom: 2px solid $colorMain;
			}
		}

		.dataBox {
			.dataScroll {
				height: 800rpx;
				overflow-y: scroll;
			}

			.scrollItem {
				padding: 0 30rpx;
				height: 100rpx;
				line-height: 100rpx;
				box-sizing: border-box;
				position: relative;

			}

			.activeIcon {
				color: $colorMain !important;
				position: absolute;
				right: 30rpx;
				bottom: 0;
			}
		}
	}

	.subject {
		text-align: left;
		margin-top: 10rpx;
		font-weight: bolder;

		.tips {
			color: #969699;
			font-size: 24rpx;
			font-weight: normal;
		}
	}
</style>